<template>
  <a-layout id="components-layout-demo-custom-trigger" style="height: 100vh">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      :width="220"
      :collapsedWidth="80"
      :class="{ 'mini-nav': collapsed }"
    >
      <div class="menu-logo">
        <img class="logo" src="../assets/images/nav/logo_icon.png.png" />
        <h2>智慧政协履职平台</h2>
      </div>
      <div class="menu-jianb_bg" v-if="!isShowSecondMenu"></div>
      <h2 class="suncnui-icon-homeBut" v-if="isShowSecondMenu" @click="goHome">
        <p>
          <span><i class="suncnui suncnui-icon-home1"></i></span>
        </p>
        <p id="suncnui-left-back-home">返回首页</p>
      </h2>
      <h3 class="collapsed" v-if="isShowSecondMenu">
        <a-icon
          class="side-shrink"
          type="left-circle"
          theme="filled"
          @click="toggleCollapsed"
        />
      </h3>
      <div
        class="menu-container"
        :style="{ top: isShowSecondMenu ? '211px' : '160px' }"
      >
        <div class="first" v-if="!isShowSecondMenu">
          <ul class="firMenu-ul">
            <li
              :class="`bg0${(index % 5) + 1}`"
              v-for="(item, index) in firstMenuList"
              :key="item.id"
              @click="menuClick(item)"
            >
              <span><i :class="['suncnui', item.icon]"></i></span>
              <p>
                <a>{{ item.text }}</a>
              </p>
            </li>
          </ul>
        </div>
        <div class="second-menu" v-if="isShowSecondMenu">
          <a-menu
            :open-keys="openKeys"
            :selectedKeys="[$route.path]"
            @openChange="onOpenChange"
            mode="inline"
            theme="dark"
            :inline-collapsed="collapsed"
          >
            <template v-for="v in menuData">
              <a-menu-item
                v-if="!v.children"
                :key="v.name"
                @click="jumpRouter(v)"
              >
                <i
                  :class="['suncnui', v.icon]"
                  v-if="!!v.icon && v.icon.length > 0"
                ></i>
                <span>{{ v.text }}</span>
              </a-menu-item>
              <a-sub-menu v-else :key="v.name">
                <span slot="title">
                  <i
                    :class="['suncnui', v.icon]"
                    v-if="!!v.icon && v.icon.length > 0"
                  ></i>
                  <span>{{ v.text }}</span>
                </span>
                <a-menu-item
                  v-for="vv in v.children"
                  :key="vv.name"
                  @click="jumpRouter(vv)"
                >
                  <i
                    :class="['suncnui', vv.icon]"
                    v-if="!!vv.icon && vv.icon.length > 0"
                  ></i>
                  <span>{{ vv.text }}</span>
                </a-menu-item>
              </a-sub-menu>
            </template>
          </a-menu>
        </div>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <s-header />
      </a-layout-header>
      <a-layout-content>
        <div
          class="content"
          :style="{
            background: $route.path === '/console/home' ? 'none' : '#fff'
          }"
        >
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import Sheader from '../components/header/index'
import meun from '@/router/meun'
export default {
  components: {
    's-header': Sheader
  },
  data() {
    return {
      menuData: [],
      openKeys: [],
      rootSubmenuKeys: ['1', '2'],
      collapsed: false,
      isShowSecondMenu: false,
      firstMenuList: [
        {
          index: 1,
          text: '提案管理',
          icon: 'suncnui-icon-tian'
        },
        {
          index: 2,
          text: '委员管理',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 3,
          text: '用户管理',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 4,
          text: '会议管理',
          icon: 'suncnui-icon-huiyiguanli'
        },
        {
          index: 5,
          text: '活动管理',
          icon: 'suncnui-icon-huodong'
        },
        {
          index: 6,
          text: '社情民意',
          icon: 'suncnui suncnui-icon-sheqing'
        },
        {
          index: 7,
          text: '会议发言',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 8,
          text: '日常办公',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 9,
          text: '新闻管理',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 10,
          text: '网络议政',
          icon: 'suncnui-icon-bangong'
        },
        {
          index: 11,
          text: '双向互评',
          icon: 'suncnui-icon-bangong'
        }
      ]
    }
  },
  created() {
    this.openKeys = [sessionStorage.getItem('openKeys')]
    this.isShowSecondMenu = this.getShowSecondMenu
    if (this.isShowSecondMenu) {
      this.menuData = meun()
    }
  },
  watch: {
    //监听vuex数据变化更新左侧边菜单
    getShowSecondMenu(newVal) {
      this.isShowSecondMenu = newVal
    },
    $route: {
      handler: function (newVal) {
        if (newVal.path == '/console/home') {
          this.setIsShowSecondMenu(false)
        } else {
          this.setIsShowSecondMenu(true)
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  computed: {
    ...mapGetters(['getShowSecondMenu'])
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setIsShowSecondMenu: 'SET_ISSHOWSECONDMENU'
    }),
    // 相同路由禁止跳转，后续如果需要刷新可以改变?参数
    jumpRouter(user) {
      const { path } = this.$route
      const { name } = user
      if (name === path) {
        return
      }
      if (user.icon && user.children === undefined) {
        this.openKeys = []
        sessionStorage.setItem('openKeys', this.openKeys)
      }
      this.$router.push(name)
    },
    goHome() {
      this.isShowSecondMenu = false
      this.collapsed = false
      this.setIsShowSecondMenu(this.isShowSecondMenu)
      this.$router.push('/console/home')
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
    },
    menuClick( ) {
      this.openKeys = []
      this.isShowSecondMenu = true
      this.setIsShowSecondMenu(this.isShowSecondMenu)
      this.menuData = meun()
      const menuMap = this.menuData.map((x) => {
        if (x.children) {
          return x.name
        }
      })
      this.rootSubmenuKeys = menuMap
      if (
        this.$route.path === '/console/home' ||
        this.$route.path === '/console'
      ) {
        if (this.menuData[0].children) {
          //一级导航第一项地址跳转
          this.$router.push(this.menuData[0].children[0].name)
          this.openKeys.push(this.menuData[0].name)
          sessionStorage.setItem('openKeys', this.openKeys)
        } else {
          this.$router.push(this.menuData[0].name)
          this.openKeys = []
          sessionStorage.setItem('openKeys', this.openKeys)
        }
      }
    },
    onOpenChange(openKeys) {
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]]
      } else {
        this.openKeys = ['']
      }
      sessionStorage.setItem('openKeys', this.openKeys)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/console.less';
.ant-layout-header {
  background-color: #fff;
  height: auto;
  line-height: 0px;
}
.ant-layout-content {
  background-color: #eceef1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.content {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
}
.ant-layout-sider {
  color: #fff;
  position: relative;
  height: 100%;
  background: #015293 url('../assets/images/nav/side_menu_bg.png') no-repeat
    center -6px;
  padding-bottom: 56px;
}
</style>